<template>
  <div class="edit-popup">
    <popup
        ref="popupRef"
        :title="popupTitle"
        :async="true"
        width="1050px"
        :clickModalClose="true"
        @confirm="handleSubmit"
        @close="handleClose"
    >
      <el-tabs v-model="activeName">
        <el-tab-pane label="基本信息" name="first">
          <el-form
              ref="formRef"
              :model="formData"
              label-width="160px"
              :rules="formRules"
              :inline="true"
          >
            <el-form-item label="提案名称" prop="caseName">
              <el-input class="w-[300px]" v-model="formData.caseName"/>
            </el-form-item>
            <el-form-item label="提案英文名称" prop="acaseName">
              <el-input class="w-[300px]" v-model="formData.ourRef"/>
            </el-form-item>
            <el-form-item label="提案其他名称" prop="bcaseName">
              <el-input class="w-[300px]" v-model="formData.ourRef"/>
            </el-form-item>
            <el-form-item label="专利标签" prop="ourRef">
              <el-input class="w-[300px]" v-model="formData.ourRef" placeholder="请选择"/>
            </el-form-item>
            <el-form-item label="我方文号" prop="ourRef">
              <el-input
                  v-model="formData.ourRef"
                  class="w-[300px]"
                  placeholder="系统自动生成"
              />
            </el-form-item>
            <el-form-item label="业务类型" prop="businessType">
              <el-select
                  class="flex-1 w-[300px]"
                  v-model="formData.businessType"
                  placeholder="请选择业务类型"
              >
                <el-option label="普通新申请" value=""/>
              </el-select>
            </el-form-item>
            <el-form-item label="国家（地区）" prop="designatedCountry">
              <el-input
                  v-model="formData.designatedCountry"
                  class="w-[300px]"
                  placeholder="请输入申请国家（地区）"
              />
            </el-form-item>

            <el-form-item label="客户文号" prop="customerDocumentNumber">
              <el-input
                  class="w-[300px]"
                  v-model="formData.customerDocumentNumber"
                  placeholder="请输入客户文号"
              />
            </el-form-item>

            <el-form-item label="案件流向" prop="caseFlow">
              <el-select
                  class="flex-1 w-[300px]"
                  v-model="formData.caseFlow"
                  placeholder="请选择"
              >
                <el-option label="内-内" value=""/>
                <el-option label="外-外" value=""/>
              </el-select>
            </el-form-item>
            <el-form-item label="案源国" prop="countryOfOrigin">
              <el-input class="w-[300px]" v-model="formData.countryOfOrigin"/>
            </el-form-item>
            <el-form-item label="代理机构" prop="agency">
              <el-input class="w-[300px]" v-model="formData.agency"/>
            </el-form-item>
            <el-form-item label="申请方式" prop="proposalForm">
              <el-select
                  class="flex-1 w-[300px]"
                  v-model="formData.isMaterials"
                  placeholder="请选择"
              >
                <el-option label="电子申请" value="2"/>
                <el-option label="纸本申请" value="1"/>
              </el-select>
            </el-form-item>
            <el-form-item label="起始阶段" prop="initialPeriod">
              <el-select
                  class="flex-1 w-[300px]"
                  v-model="formData.initialPeriod"
                  placeholder="请选择"
              >
                <el-option label="新申请" value="1"/>
              </el-select>
            </el-form-item>
            <el-form-item label="合同编号" prop="contractNumber">
              <el-input class="w-[300px]" v-model="formData.contractNumber"/>
              <el-button v-perms="['case:add']" type="primary" style="margin-left: 20px" size="small">
                选择合同
              </el-button>
            </el-form-item>
            <el-form-item label="办理年费阶段" prop="referenceNumber">
              <el-input class="w-[300px]" v-model="formData.referenceNumber"/>
            </el-form-item>
            <el-form-item label="宽限期" prop="budget">
              <el-select
                  class="flex-1 w-[300px]"
                  v-model="formData.budget"
                  placeholder="请选择"
              >
                <el-option label="31月" value="1"></el-option>
                <el-option label="32月" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="指定缔约方（海牙）" prop="author">
              <el-select
                  class="flex-1 w-[300px]"
                  v-model="formData.budget"
                  placeholder="请选择"
              >
                <el-option label="1" value="1"></el-option>
                <el-option label="2" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="代理人" prop="cost">
              <el-input
                  class="w-[300px]"
                  v-model="formData.cost"
                  placeholder="请输入代理人"
              />
            </el-form-item>
            <el-form-item label="代理机构案号" prop="versionNumber">
              <el-input class="w-[300px]" v-model="formData.versionNumber"/>
            </el-form-item>
            <el-form-item label="是否需要纸质通知书" prop="isPapernotice">
              <el-select v-model="formData.isPapernotice" class="w-[300px]" clearable>
                <el-option label="是" value="1"/>
                <el-option label="否" value="2"/>
              </el-select>
            </el-form-item>
            <el-form-item label="技术领域" prop="softwareWorkDescription">
              <el-select
                  class="flex-1 w-[300px]"
                  v-model="formData.budget"
                  placeholder="请选择"
              >
                <el-option label="电学" value="1"></el-option>
                <el-option label="测试" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="新申请递交日" prop="homeLocation">
              <el-date-picker
                  class="flex-1 !flex"
                  placeholder="请选择"
                  style="width: 300px"
                  v-model="formData.homeLocation"
                  type="datetime"
                  clearable
                  value-format="YYYY-MM-DD hh:mm:ss"
              />
            </el-form-item>

            <el-form-item label="流程人员" prop="hardwareEnvironment">
              <el-select
                  class="flex-1 w-[300px]"
                  v-model="formData.hardwareEnvironment"
                  placeholder="请选择"
              >
                <el-option label="流程01" value="1"></el-option>
                <el-option label="流程02" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="授权发文日" prop="softwareAbbreviation">
              <el-date-picker
                  class="flex-1 !flex w-[300px]"
                  style="width: 300px"
                  placeholder="请选择"
                  v-model="formData.softwareAbbreviation"
                  type="datetime"
                  clearable
                  value-format="YYYY-MM-DD hh:mm:ss"
              />
            </el-form-item>

            <el-form-item label="其他" prop="rest">
              <el-checkbox-group
                  class="w-[740px]"
                  v-model="formData.rest"
                  placeholder="其他"
              >
                <el-row>
                  <el-col :span="4">
                    <el-checkbox label="同时提实审" value="1"></el-checkbox>
                  </el-col>
                  <el-col :span="3">
                    <el-checkbox label="提前公布" value="2"></el-checkbox>
                  </el-col>
                  <el-col :span="5">
                    <el-checkbox label="同时请求DAS码" value="3"></el-checkbox>
                  </el-col>
                  <el-col :span="4">
                    <el-checkbox label="请求保密审查" value="4"></el-checkbox>
                  </el-col>
                  <el-col :span="4">
                    <el-checkbox label="同日申请（一带一）" value="5"></el-checkbox>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="4">
                    <el-checkbox label="预审案件" value="6"></el-checkbox>
                  </el-col>
                  <el-col :span="3">
                    <el-checkbox label="优先审查" value="7"></el-checkbox>
                  </el-col>
                  <el-col :span="5">
                    <el-checkbox label="快维案件" value="8"></el-checkbox>
                  </el-col>
                  <el-col :span="4">
                    <el-checkbox label="请求费用减数" value="9"></el-checkbox>
                  </el-col>
                </el-row>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
          <el-form
              ref="formRef"
              :model="formData"
              label-width="160px"
              :rules="formRules"
              :inline="true"
          >
            <el-form-item label="申请号" prop="softwareEnvironment">
              <el-input class="w-[300px]" v-model="formData.softwareEnvironment"/>
            </el-form-item>
            <el-form-item label="申请日" prop="programmingLanguage">
              <el-date-picker
                  class=" flex-1 !flex" style="width: 300px"
                  v-model="formData.programmingLanguage"
                  type="datetime"
                  clearable
                  value-format="YYYY-MM-DD hh:mm:ss"
              />
            </el-form-item>
            <el-form-item label="公开号" prop="functionAndArt">
              <el-input class="w-[300px]" v-model="formData.functionAndArt"/>
            </el-form-item>
            <el-form-item label="公告日" prop="sourceQuantity">
              <el-date-picker
                  class="flex-1 !flex"
                  v-model="formData.sourceQuantity"
                  type="datetime" style="width: 300px"
                  clearable
                  value-format="YYYY-MM-DD hh:mm:ss"
              />
            </el-form-item>
            <el-form-item label="公开号" prop="sourceQuantity">
              <el-input class="w-[300px]" v-model="formData.functionAndArt"/>
            </el-form-item>
            <el-form-item label="公开日" prop="programmingLanguage">
              <el-date-picker
                  class="flex-1 !flex" style="width: 300px"
                  v-model="formData.programmingLanguage"
                  type="datetime"
                  clearable
                  value-format="YYYY-MM-DD hh:mm:ss"
              />
            </el-form-item>

            <el-form-item label="原案申请号" prop="functionAndArt">
              <el-input class="w-[300px]" v-model="formData.functionAndArt"/>
            </el-form-item>
            <el-form-item label="原案申请日" prop="programmingLanguage">
              <el-date-picker
                  class="flex-1 !flex" style="width: 300px"
                  v-model="formData.programmingLanguage"
                  type="datetime"
                  clearable
                  value-format="YYYY-MM-DD hh:mm:ss"
              />
            </el-form-item>
            <el-form-item label="原案公开号" prop="functionAndArt">
              <el-input class="w-[300px]" v-model="formData.functionAndArt"/>
            </el-form-item>
            <el-form-item label="原案公开日" prop="programmingLanguage">
              <el-date-picker
                  class="flex-1 !flex" style="width: 300px"
                  v-model="formData.programmingLanguage"
                  type="datetime"
                  clearable
                  value-format="YYYY-MM-DD hh:mm:ss"
              />
            </el-form-item>
            <el-form-item label="原案公告号" prop="functionAndArt">
              <el-input class="w-[300px]" v-model="formData.functionAndArt"/>
            </el-form-item>
            <el-form-item label="原案公告日" prop="programmingLanguage">
              <el-date-picker
                  class="flex-1 !flex" style="width: 300px"
                  v-model="formData.programmingLanguage"
                  type="datetime"
                  clearable
                  value-format="YYYY-MM-DD hh:mm:ss"
              />
            </el-form-item>
            <el-form-item label="PCT申请号" prop="functionAndArt">
              <el-input class="w-[300px]" v-model="formData.functionAndArt"/>
            </el-form-item>
            <el-form-item label="PCT申请日" prop="programmingLanguage">
              <el-date-picker
                  class="flex-1 !flex" style="width: 300px"
                  v-model="formData.programmingLanguage"
                  type="datetime"
                  clearable
                  value-format="YYYY-MM-DD hh:mm:ss"
              />
            </el-form-item>
            <el-form-item
                label="PCT检索报告出具国家"
                prop="programmingLanguage"
            >
              <el-select v-model="formData.isPapernotice" class="w-[300px]" clearable>
                <el-option label="中国" value=""/>
                <el-option label="美国" value=""/>
              </el-select>
            </el-form-item>
            <el-form-item label="PCT公布日" prop="programmingLanguage">
              <el-date-picker
                  class="flex-1 !flex" style="width: 300px"
                  v-model="formData.programmingLanguage"
                  type="datetime"
                  clearable
                  value-format="YYYY-MM-DD hh:mm:ss"
              />
            </el-form-item>
            <el-form-item label="PCT公布号" prop="functionAndArt">
              <el-input
                  class="w-[300px]"
                  v-model="formData.functionAndArt"
                  placeholder="请输入PCT公布号"
              />
            </el-form-item>
            <el-form-item label="PCT公布语言" prop="programmingLanguage">
              <el-select v-model="formData.isPapernotice" class="w-[300px]" clearable>
                <el-option label="英语" value=""/>
                <el-option label="中文" value=""/>
              </el-select>
            </el-form-item>
            <el-form-item label="延迟审查" prop="programmingLanguage">
              <el-select v-model="formData.isPapernotice" class="w-[300px]" clearable>
                <el-option label="英语" value=""/>
                <el-option label="中文" value=""/>
              </el-select>
            </el-form-item>
            <el-form-item label="是否首次申请" prop="programmingLanguage">
              <el-select v-model="formData.isPapernotice" class="w-[300px]" clearable>
                <el-option label="是" value=""/>
                <el-option label="否" value=""/>
              </el-select>
            </el-form-item>
            <el-form-item label="案件系数" prop="programmingLanguage">
              <el-select v-model="formData.isPapernotice" class="w-[300px]" clearable>
                <el-option label="简单" value=""/>
                <el-option label="一般" value=""/>
              </el-select>
            </el-form-item>
            <el-form-item label="产品类别" prop="functionAndArt">
              <el-input class="w-[300px]" v-model="formData.dfunctionAndArt"/>
            </el-form-item>
            <el-form-item label="成本" prop="functionAndArt">
              <el-input class="w-[300px]" v-model="formData.vfunctionAndArt"/>
            </el-form-item>
            <el-form-item label="预算" prop="functionAndArt">
              <el-input class="w-[300px]" v-model="formData.cfunctionAndArt"/>
            </el-form-item>
            <el-form-item label="监控年费" prop="aisPapernotice">
              <el-select
                  v-model="formData.aisPapernotice"
                  class="w-[300px]"
                  clearable
              >
                <el-option label="是" value="1"/>
                <el-option label="否" value="2"/>
              </el-select>
            </el-form-item>
            <el-form-item label="签约单位" prop="aprogrammingLanguage">
              <el-select
                  v-model="formData.aprogrammingLanguage"
                  class="w-[300px]"
                  clearable
              >
                <el-option label="专利公司" value="1"/>
                <el-option label="法律公司" value="2"/>
              </el-select>
            </el-form-item>
            <el-form-item label="保护中心" prop="programmingLanguage">
              <el-select v-model="formData.isPapernotice" class="w-[300px]" clearable>
                <el-option label="大连市知识产权公司" value="1"/>
                <el-option label="东莞知识产权公司" value="2"/>
              </el-select>
            </el-form-item>
            <el-form-item label="合同有效期限" prop="developmentCompletionDate">
              <daterange-picker
                  style="width: 300px"
                  v-model:startTime="formData.externalBillingDateStart"
                  v-model:endTime="formData.externalBillingDateEnd"
              />
            </el-form-item>
            <el-form-item label="原案PTC申请号" prop="functionAndArt">
              <el-input class="w-[300px]" v-model="formData.functionAndArt"/>
            </el-form-item>
            <br/>
            <el-form-item label="案件备注" prop="remark">
              <el-input
                  class="w-[300px]"
                  v-model="formData.remark"
                  type="textarea"
                  placeholder="请输入案件备注"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="承办信息" name="second">
          <el-form
              ref="formRef"
              :model="formData"
              label-width="160px"
              :rules="formRules"
              :inline="true"
          >
            <el-form-item label="承办部门" prop="undertakingDepartment">
              <el-select
                  class="flex-1 w-[300px]"
                  v-model="formData.undertakingDepartment"
                  placeholder="请选择承办部门"
              >
                <el-option label="流程部" value="2"/>
                <el-option label="销售部" value="1"/>
              </el-select>
            </el-form-item>
            <el-form-item label="处理人" prop="conductor">
              <el-input
                  class="w-[300px]"
                  v-model="formData.conductor"
                  placeholder="请输入处理人"
              />
            </el-form-item>
            <el-form-item label="所属分布" prop="ownershipDistribution">
              <el-select
                  class="flex-1 w-[300px]"
                  v-model="formData.ownershipDistribution"
                  placeholder="请选择所属分布"
              >
                <el-option label="深圳" value="2"/>
                <el-option label="东莞" value="1"/>
              </el-select>
            </el-form-item>
            <el-form-item label="是否配案" prop="isStateCompensation">
              <el-radio-group
                  v-model="formData.isStateCompensation"
                  placeholder="请选择是否配案"
              >
                <el-radio label="0">是</el-radio>
                <el-radio label="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="处理事项" prop="handlingInformation">
              <el-input
                  class="w-[300px]"
                  v-model="formData.handlingInformation"
                  placeholder="请输入处理事项"
              />
            </el-form-item>
            <el-form-item label="委托日期" prop="principalDates">
              <el-date-picker
                  class="flex-1 !flex" style="width: 300px"
                  v-model="formData.principalDates"
                  type="datetime"
                  clearable
                  value-format="YYYY-MM-DD hh:mm:ss"
                  placeholder="请选择委托日期"
              />
            </el-form-item>
            <el-form-item label="客户期限" prop="customerTerm">
              <el-date-picker
                  class="flex-1 !flex" style="width: 300px"
                  v-model="formData.customerTerm"
                  type="datetime"
                  clearable
                  value-format="YYYY-MM-DD hh:mm:ss"
                  placeholder="请选择客户期限"
              />
            </el-form-item>
            <el-form-item label="内部期限" prop="internalWearLife">
              <el-date-picker
                  class="flex-1 !flex" style="width: 300px"
                  v-model="formData.internalWearLife"
                  type="datetime"
                  clearable
                  value-format="YYYY-MM-DD hh:mm:ss"
                  placeholder="请选择内部期限"
              />
            </el-form-item>
            <el-form-item label="官方期限" prop="internalWearLife">
              <el-date-picker
                  class="flex-1 !flex" style="width: 300px"
                  v-model="formData.internalWearLife"
                  type="datetime"
                  clearable
                  value-format="YYYY-MM-DD hh:mm:ss"
                  placeholder="请选择官方期限"
              />
            </el-form-item>

            <el-form-item label="处理事项备注" prop="conductor">
              <el-input
                  class="w-[300px]"
                  v-model="formData.conductor"
                  type="textarea"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="费用信息" name="third">
          <div style="display: flex; justify-content: space-between">
            <div style="display: flex;">
              <div style="font-weight: bold; color: #000; padding: 0px 20px">
                代理费列表
              </div>
              <el-button
                  v-perms="['basic:add']"
                  type="primary"
                  size="small"
                  @click="dialogFormVisible = true"
              >
                <template #icon>
                  <icon name="el-icon-Plus"/>
                </template>
                新增
              </el-button>
            </div>
            <div style="padding: 0px 20px">
              代理费：0 官费：0 第三方费用费：0汇总：0
            </div>
          </div>
          <div style="padding: 0px 10px">
            <el-radio-group v-model="isState">
              <el-radio label="0">自定义</el-radio>
              <el-radio label="1">统包</el-radio>
              <el-radio label="2">按项</el-radio>
            </el-radio-group>
          </div>
          <el-table class="mt-4" size="large" stripe>
            <el-table-column type="selection" width="55"/>
            <el-table-column label="费用类型" min-width="100"/>
            <el-table-column label="币别" min-width="100"/>
            <el-table-column label="金额" min-width="100"/>
            <el-table-column label="账单号" min-width="100"/>
            <el-table-column label="账单日" min-width="100"/>
            <el-table-column label="应付日期" min-width="100"/>
            <el-table-column label="实付日期" min-width="100"/>
            <el-table-column label="收款方" min-width="100"/>
          </el-table>
          <div style="display: flex; justify-content: start; padding: 20px 0px">
            <div style="font-weight: bold; color: #000; padding: 0px 20px">
              官费列表
            </div>
            <el-button
                v-perms="['basic:add']"
                type="primary"
                size="small"
                @click="OptionalOfficialFee = true"
            >
              选择官费
            </el-button>
          </div>
          <el-table class="mt-4" size="large" stripe>
            <el-table-column type="selection" width="55"/>
            <el-table-column label="费用名称" min-width="100"/>
            <el-table-column label="费用类型" min-width="100"/>
            <el-table-column label="币别" min-width="100"/>
            <el-table-column label="金额" min-width="100"/>
            <el-table-column label="数量" min-width="100"/>
            <el-table-column label="实际币别" min-width="100"/>
            <el-table-column label="实际金额" min-width="100"/>
            <el-table-column label="应收日期" min-width="100"/>
            <el-table-column label="实收日期" min-width="100"/>
            <el-table-column label="官费期限" min-width="100"/>
            <el-table-column label="实付日期" min-width="100"/>
          </el-table>
          <div style="display: flex; justify-content: start; padding: 20px 0px">
            <div style="font-weight: bold; color: #000; padding: 0px 20px">
              第三方费用支付
            </div>
            <el-button
                v-perms="['basic:add']"
                type="primary"
                size="small"
                @click="dialogFormVisible = true"
            >
              <template #icon>
                <icon name="el-icon-Plus"/>
              </template>
              新增
            </el-button>
          </div>
          <div style="padding: 0px 10px">
            <el-radio-group v-model="isStateCompensation">
              <el-radio label="0">自定义</el-radio>
              <el-radio label="1">按额</el-radio>
            </el-radio-group>
          </div>
          <el-table class="mt-4" size="large" stripe>
            <el-table-column label="费用类型" min-width="100"/>
            <el-table-column label="币别" min-width="100"/>
            <el-table-column label="金额" min-width="100"/>
            <el-table-column label="账单号" min-width="100"/>
            <el-table-column label="账单日" min-width="100"/>
            <el-table-column label="应付日期" min-width="100"/>
            <el-table-column label="实付日期" min-width="100"/>
            <el-table-column label="收款方" min-width="100"/>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="优先权信息" name="six">
          <el-form
              ref="formRef"
              :model="formData"
              label-width="160px"
              :rules="formRules"
              :inline="true"
          >
            <el-form-item label="优先权号">
              <el-input
                  class="w-[300px]"
                  v-model="formData.remark"
                  placeholder="请输入优先权号"
              />
            </el-form-item>
            <el-form-item label="优先权地区" prop="aprogrammingLanguage">
              <el-select
                  v-model="formData.aprogrammingLanguage"
                  class="w-[300px]"
                  clearable
              >
                <el-option label="中国" value="1"/>
                <el-option label="法国" value="2"/>
              </el-select>
            </el-form-item>
            <el-form-item label="接入码">
              <el-input class="w-[300px]" v-model="formData.remark"/>
            </el-form-item>
            <el-form-item label="优先权申请人">
              <el-input class="w-[300px]" v-model="formData.remark"/>
            </el-form-item>
            <el-form-item label="我方文号">
              <el-input class="w-[300px]" v-model="formData.remark"/>
            </el-form-item>
            <el-form-item label="申请类型" prop="aprogrammingLanguage">
              <el-select
                  v-model="formData.aprogrammingLanguage"
                  class="w-[300px]"
                  clearable
              >
                <el-option label="发明" value="1"/>
                <el-option label="植物" value="2"/>
              </el-select>
            </el-form-item>
            <el-form-item label="优先权日" prop="developmentCompletionDate">
              <el-date-picker
                  class="flex-1 !flex" style="width: 300px"
                  v-model="formData.programmingLanguage"
                  type="datetime"
                  clearable
                  value-format="YYYY-MM-DD hh:mm:ss"
              />
            </el-form-item>
          </el-form>
          <el-button v-perms="['basic:add']" type="primary" size="small">
            添加优先权
          </el-button>
          <el-button
              v-perms="['basic:add']"
              @click="SelectionApplication = true"
              type="primary"
              size="small"
          >
            选择在先申请案
          </el-button>
          <el-table class="mt-4" size="large" stripe>
            <el-table-column label="优先权号" min-width="100"/>
            <el-table-column label="优先权地区" min-width="120"/>
            <el-table-column label="优先权日" min-width="100"/>
            <el-table-column label="接入码" min-width="100"/>
            <el-table-column label="优先权申请人" min-width="120"/>
            <el-table-column label="我方文号" min-width="100"/>
            <el-table-column label="申请类型" min-width="100"/>
            <el-table-column label="操作" width="120" fixed="right">
              <template #default="{ row }">
                <el-button
                    v-perms="['case:del']"
                    type="danger"
                    link
                    @click="handleDelete(row.id)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="相关案件" name="fourth">
          <el-form
              ref="formRef"
              :model="formData"
              label-width="160px"
              :rules="formRules"
              :inline="true"
          >

            <el-form-item label="相关类型" prop="correlationType">
              <el-select
                  v-model="queryParams.correlationType"
                  class="w-[300px]"
                  clearable
              >
                <el-option label="家族案件" value="1"/>
                <el-option label="技术相关" value="2"/>
                <el-option label="同日申请" value="3"/>
                <el-option label="同日递交" value="4"/>
              </el-select>
            </el-form-item>
            <el-form-item label="添加相关" prop="ourRef">
              <el-input class="w-[300px]" v-model="queryParams.ourRef"/>
            </el-form-item>
          </el-form>
          <el-table
              class="mt-4"
              size="large"
              v-loading="pager.loading"
              :data="pager.lists" stripe
          >
            <el-table-column label="我方文号" prop="ourRef" min-width="100"/>
            <el-table-column
                label="相关案名称"
                prop="relevantCaseName"
                min-width="100"
            />
            <el-table-column label="相关类型" prop="correlationType" min-width="100"/>
            <el-table-column
                label="国家（地区）"
                prop="designatedCountry"
                min-width="150"
            />
            <el-table-column label="申请类型" prop="putinType" min-width="100"/>
            <el-table-column label="案件状态" prop="caseStatus" min-width="100"/>
            <el-table-column label="操作" width="120" fixed="right">
              <template #default="{ row }">
                <el-button
                    v-perms="['case:del']"
                    type="danger"
                    link
                    @click="handleDelete(row.id)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="案件要求" name="seven">
          <el-button
              v-perms="['basic:add']"
              type="primary"
              @click="AddCaseRequest = true"
              size="small"
          >
            添加案件要求
          </el-button>
          <el-table
              class="mt-4"
              size="large"
              v-loading="pager.loading"
              :data="pager.lists" stripe
          >
            <el-table-column label="附件名称" prop="ourRef" min-width="100"/>
            <el-table-column label="要求类型" prop="relevantCaseName" min-width="100"/>
            <el-table-column label="标题" prop="correlationType" min-width="100"/>
            <el-table-column label="描述" prop="designatedCountry" min-width="150"/>

            <el-table-column label="操作" width="120" fixed="right">
              <template #default="{ row }">
                <el-button
                    v-perms="['case:del']"
                    type="danger"
                    link
                    @click="handleDelete(row.id)"
                >
                  删除
                </el-button>
                <el-button link @click="handleDelete(row.id)"> 下载</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="点数信息" name="fifth">
          <el-button
              v-perms="['basic:add']"
              type="primary"
              size="small"
              @click="tally = true"
          >
            <template #icon>
              <icon name="el-icon-Plus"/>
            </template>
            新增
          </el-button>
          <el-table
              class="mt-4"
              size="large"
              v-loading="pager.loading"
              :data="pager.lists" stripe
          >
            <el-table-column label="共有人" prop="partOwner" min-width="100"/>
            <el-table-column label="办理事项" prop="todonote" min-width="100"/>
            <el-table-column label="办理日期" prop="manageDate" min-width="100"/>
            <el-table-column label="点数类型" prop="countType" min-width="100"/>
            <el-table-column label="点数数量" prop="numberOfPoints" min-width="100"/>
            <el-table-column
                label="点数状态"
                prop="addtotalstatepoint"
                min-width="100"
            />
            <el-table-column label="操作" width="120" fixed="right">
              <template #default="{ row }">
                <el-button
                    v-perms="['case:del']"
                    type="danger"
                    link
                    @click="handleDelete(row.id)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <el-dialog v-model="OptionalOfficialFee" title="选择官费" width="1200px">
        <el-form-item prop="addressChinese">
          <el-input v-model="formData.caseName" style="width: 270px"/>
          <el-button type="primary"> 查询</el-button>
        </el-form-item>

        <el-table class="mt-4" size="large" stripe>
          <el-table-column type="selection" width="55"/>
          <el-table-column label="费用名称" min-width="100"/>
          <el-table-column label="费减类型" min-width="100"/>
          <el-table-column label="币别" min-width="100"/>
          <el-table-column label="金额" min-width="100"/>
          <el-table-column label="数量" min-width="100"/>
          <el-table-column label="实际币别" min-width="100"/>
          <el-table-column label="实际金额" min-width="100"/>
          <el-table-column label="应收日期" min-width="100"/>
          <el-table-column label="实收日期" min-width="100"/>
          <el-table-column label="官方期限" min-width="100"/>
          <el-table-column label="实付日期" min-width="100"/>
          <el-table-column label="操作" min-width="100">
            <template #default="{ row }">
              <el-button
                  v-perms="['case:del']"
                  type="danger"
                  link
                  @click="handleDelete(row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
      <el-dialog v-model="dialogFormVisible" title="修改费用" width="1200px">
        <el-form
            ref="formRef"
            :model="formData"
            label-width="110px"
            :rules="formRules"
            :inline="true"
        >
          <el-form-item label="实收金额" prop="fundsReceived">
            <el-input
                class="w-[220px]"
                v-model="formData.fundsReceived"
                placeholder="请输入实收金额"
            />
          </el-form-item>
          <el-form-item label="是否作废" prop="isInvalid">
            <el-select
                class="flex-1 w-[220px]"
                v-model="formData.isInvalid"
                placeholder="请选择是否作废"
            >
              <el-option label="是" value="1"/>
              <el-option label="否" value="2"/>
            </el-select>
          </el-form-item>
          <el-form-item label="实收日期" prop="paidupDate">
            <el-date-picker
                class="flex-1 !flex"
                style="width: 220px"
                v-model="formData.paidupDate"
                type="datetime"
                clearable
                value-format="YYYY-MM-DD hh:mm:ss"
                placeholder="请选择实收日期"
            />
          </el-form-item>

          <el-form-item label="请款单号" prop="paymentRequestNumber">
            <el-input
                class="w-[220px]"
                v-model="formData.paymentRequestNumber"
                placeholder="请输入请款单号"
            />
          </el-form-item>

          <el-form-item label="发票号" prop="invoiceNumber">
            <el-input
                class="w-[220px]"
                v-model="formData.invoiceNumber"
                placeholder="请输入发票号"
            />
          </el-form-item>
          <el-form-item label="请款日期" prop="requestedDate">
            <el-date-picker
                class="flex-1 !flex"
                style="width: 220px"
                v-model="formData.requestedDate"
                type="datetime"
                clearable
                value-format="YYYY-MM-DD hh:mm:ss"
                placeholder="请选择请款日期"
            />
          </el-form-item>
          <el-form-item label="费用名称" prop="chargeName">
            <el-input
                class="w-[220px]"
                v-model="formData.chargeName"
                placeholder="请输入费用名称"
            />
          </el-form-item>
          <el-form-item label="费用描述" prop="chargeDepict">
            <el-input
                class="w-[220px]"
                v-model="formData.chargeDepict"
                placeholder="请输入费用描述"
            />
          </el-form-item>
          <el-form-item label="应收日期" prop="accountsDate">
            <el-date-picker
                class="flex-1 !flex"
                style="width: 220px"
                v-model="formData.accountsDate"
                type="datetime"
                clearable
                value-format="YYYY-MM-DD hh:mm:ss"
                placeholder="请选择应收日期"
            />
          </el-form-item>
          <el-form-item label="费用描述英文" prop="chargeDepictfine">
            <el-input
                class="w-[220px]"
                v-model="formData.chargeDepictfine"
                placeholder="请输入费用描述英文"
            />
          </el-form-item>

          <el-form-item label="应收金额" prop="extendedAmount">
            <el-input
                class="w-[220px]"
                v-model="formData.extendedAmount"
                placeholder="请输入应收金额"
            />
          </el-form-item>
          <el-form-item label="开票时间" prop="slt">
            <el-date-picker
                class="flex-1 !flex"
                style="width: 220px"
                v-model="formData.slt"
                type="datetime"
                clearable
                value-format="YYYY-MM-DD hh:mm:ss"
                placeholder="请选择开票时间"
            />
          </el-form-item>
          <el-form-item label="折扣率" prop="discountRate">
            <el-input
                class="w-[220px]"
                v-model="formData.discountRate"
                placeholder="请输入折扣率"
            />
          </el-form-item>

          <el-form-item label="数量" prop="count">
            <el-input
                class="w-[220px]"
                v-model="formData.count"
                placeholder="请输入数量"
            />
          </el-form-item>
          <el-form-item label="外方账单日期" prop="externalBillingDate">
            <el-date-picker
                class="flex-1 !flex"
                style="width: 220px"
                v-model="formData.externalBillingDate"
                type="datetime"
                clearable
                value-format="YYYY-MM-DD hh:mm:ss"
                placeholder="请选择外方账单日期"
            />
          </el-form-item>
          <el-form-item label="汇率" prop="parities">
            <el-input
                class="w-[220px]"
                v-model="formData.parities"
                placeholder="请输入汇率"
            />
          </el-form-item>

          <el-form-item label="收款公司账户" prop="collectingCompanyAccount">
            <el-input
                class="w-[220px]"
                v-model="formData.collectingCompanyAccount"
                placeholder="请输入收款公司账户"
            />
          </el-form-item>

          <el-form-item label="账户明细" prop="accountDetails">
            <el-input
                class="w-[220px]"
                v-model="formData.accountDetails"
                placeholder="请输入账户明细"
            />
          </el-form-item>
          <el-form-item label="收款状态" prop="collectionStatus">
            <el-select
                class="flex-1 w-[220px]"
                v-model="formData.collectionStatus"
                placeholder="请选择收款状态"
            >
              <el-option label="是" value="1"/>
              <el-option label="否" value="2"/>
            </el-select>
          </el-form-item>

          <el-form-item label="外方账单号" prop="externalBillingNumber">
            <el-input
                class="w-[220px]"
                v-model="formData.externalBillingNumber"
                placeholder="请输入外方账单号"
            />
          </el-form-item>

          <el-form-item label="垫交状态" prop="beddingCondition">
            <el-select
                class="flex-1 w-[220px]"
                v-model="formData.beddingCondition"
                placeholder="请选择垫交状态"
            >
              <el-option label="已垫交" value="1"/>
              <el-option label="未垫交" value="2"/>
            </el-select>
          </el-form-item>
          <el-form-item label="垫交人" prop="handOver">
            <el-input
                class="w-[220px]"
                v-model="formData.handOver"
                placeholder="请输入垫交人"
            />
          </el-form-item>
          <el-form-item label="税率" prop="paidupDate">
            <el-input
                class="w-[220px]"
                v-model="formData.handOver"
                placeholder="请输入税率"
            />
          </el-form-item>
          <el-form-item label="备注" prop="expenseNote">
            <el-input
                class="w-[220px]"
                v-model="formData.expenseNote"
                placeholder="请输入费用备注"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">
              保存
            </el-button>
          </div>
        </template>
      </el-dialog>
      <el-dialog v-model="tally" title="新增点数" width="550px">
        <el-form ref="formRef" :model="formData" label-width="100px" :rules="formRules">
          <el-form-item label="点数用户" prop="click">
            <el-input v-model="formData.click" placeholder="请输入点数用户"/>
          </el-form-item>
          <el-form-item label="共有人" prop="partOwner">
            <el-input v-model="formData.partOwner" placeholder="请输入共有人"/>
          </el-form-item>
          <el-form-item label="办理事项" prop="todonote">
            <el-input v-model="formData.todonote" placeholder="请输入办理事项"/>
          </el-form-item>
          <el-form-item label="办理日期" prop="manageDate">
            <el-date-picker
                class="flex-1 !flex"
                v-model="formData.manageDate"
                type="datetime"
                clearable
                value-format="YYYY-MM-DD hh:mm:ss"
                placeholder="请选择办理日期"
            />
          </el-form-item>
          <el-form-item label="点数类型" prop="countType">
            <el-select
                class="flex-1"
                v-model="formData.countType"
                placeholder="请选择点数类型"
            >
              <el-option label="点数" value=""/>
              <el-option label="金额" value=""/>
            </el-select>
          </el-form-item>
          <el-form-item label="点数数量" prop="numberOfPoints">
            <el-input v-model="formData.numberOfPoints" placeholder="请输入点数数量"/>
          </el-form-item>
          <el-form-item label="点数状态" prop="addtotalstatepoint">
            <el-select
                class="flex-1"
                v-model="formData.addtotalstatepoint"
                placeholder="请选择点数状态"
            >
              <el-option label="办理中" value=""/>
              <el-option label="已完成" value=""/>
            </el-select>
          </el-form-item>
          <el-form-item label="提成日期" prop="royaltyDate">
            <el-date-picker
                class="flex-1 !flex"
                v-model="formData.royaltyDate"
                type="datetime"
                clearable
                value-format="YYYY-MM-DD hh:mm:ss"
                placeholder="请选择提成日期"
            />
          </el-form-item>
          <el-form-item label="工作量点数" prop="workPoints">
            <el-input v-model="formData.workPoints" placeholder="请输入工作量点数"/>
          </el-form-item>
          <el-form-item label="创建人员" prop="creator">
            <el-input v-model="formData.creator" placeholder="请输入创建人员"/>
          </el-form-item>
          <el-form-item label="修改人员" prop="updateUserName">
            <el-input
                v-model="formData.updateUserName"
                placeholder="请输入修改人名称"
            />
          </el-form-item>
        </el-form>
        <div
            style="
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 10px;
                    "
        >
          <el-button v-perms="['basic:add']" type="primary"> 确定</el-button>
          <el-button type="primary"> 返回</el-button>
        </div>
      </el-dialog>
      <el-dialog v-model="SelectionApplication" title="选择在先申请案" width="800px">
        <el-input
            type="textarea"
            placeholder="输入我方文号、客户文号、申请号查询，多个中间用分号；空格或者换行隔开，默认小于10条模糊查询，大于10条精确查询"
        ></el-input>
        <div
            style="
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 10px;
                    "
        >
          <el-button v-perms="['basic:add']" type="primary"> 查询</el-button>
        </div>
        <el-table class="mt-4" size="large" v-loading="pager.loading" :data="pager.lists">
          <el-table-column type="selection" width="55"/>
          <el-table-column label="我方文号" prop="ourRef" min-width="100"/>
          <el-table-column label="申请号" prop="relevantCaseName" min-width="80"/>
          <el-table-column label="申请日" prop="correlationType" min-width="80"/>
          <el-table-column label="申请地区" prop="designatedCountry" min-width="100"/>
          <el-table-column label="申请类型" prop="putinType" min-width="100"/>
          <el-table-column label="案件状态" prop="caseStatus" min-width="100"/>
          <el-table-column label="优先权状态" prop="caseStatus" min-width="100"/>
        </el-table>
        <div
            style="
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 10px;
                    "
        >
          <el-button v-perms="['basic:add']" type="primary"> 确定</el-button>
        </div>
      </el-dialog>
      <el-dialog v-model="AddCaseRequest" title="案件要求">
        <el-form ref="formRef" :model="formData" label-width="100px" :rules="formRules">
          <el-form-item label="要求类型" prop="fundsReceived">
            <el-select class="flex-1" v-model="formData.countType" placeholder="请选择">
              <el-option label="看稿要求" value="0"/>
              <el-option label="费用要求" value="1"/>
              <el-option label="其他要求" value="2"/>
            </el-select>
          </el-form-item>
          <el-form-item label="案件流向" prop="fundsReceived">
            <el-select class="flex-1" v-model="formData.brandType" placeholder="请选择">
              <el-option label="内-内" value="0"/>
              <el-option label="外-外" value="1"/>
              <el-option label="内-外" value="2"/>
            </el-select>
          </el-form-item>
          <el-form-item label="标题" prop="click">
            <el-input v-model="formData.click"/>
          </el-form-item>
          <el-form-item label="描述" prop="click">
            <editor v-model="state.value2" height="500px" mode="simple"/>
          </el-form-item>
        </el-form>
        <div
            style="
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 10px;
                    "
        >
          <el-button v-perms="['basic:add']" type="primary"> 确定</el-button>
          <el-button type="primary"> 返回</el-button>
        </div>
      </el-dialog>
    </popup>
  </div>
</template>
<script lang="ts" setup>
import type {FormInstance} from 'element-plus'
import {caseEdit, caseAdd, caseDetail, caseLists, caseDelete} from '@/api/case'
import Popup from '@/components/popup/index.vue'
import {usePaging} from '@/hooks/usePaging'
import feedback from '@/utils/feedback'
import type {PropType} from 'vue'

const isState = ref('')
const isStateCompensation = ref('')
const activeName = 'first'
const dialogFormVisible = ref(false)
const tally = ref(false)
const OptionalOfficialFee = ref(false)
const SelectionApplication = ref(false)
const AddCaseRequest = ref(false)
const state = reactive({
  value1: '',
  value2: ''
})
const queryParams = reactive({
  correlationType: '',
  correlationTypeid: '',
  ourRef: ''
})

const {pager, getLists, resetPage, resetParams} = usePaging({
  fetchFun: caseLists,
  params: queryParams
})

defineProps({
  dictData: {
    type: Object as PropType<Record<string, any[]>>,
    default: () => ({})
  }
})
const handleDelete = async (id: number) => {
  await feedback.confirm('确定要删除？')
  await caseDelete({id})
  feedback.msgSuccess('删除成功')
  getLists()
}
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')
const popupTitle = computed(() => {
  return mode.value == 'edit' ? '编辑新建合同案件信息' : '新增案件信息'
})

const formData = reactive({
  rest: '',
  externalBillingDateStart: '',
  externalBillingDateEnd: '',
  aprogrammingLanguage: '',
  aisPapernotice: '',
  cfunctionAndArt: '',
  vfunctionAndArt: '',
  dfunctionAndArt: '',
  caseName: '',
  caseType: '',
  businessType: '',
  putinType: '',
  undertakingDepartment: '',
  conductor: '',
  taxRate: '',
  costType: '',
  cost: '',
  contributionPool: '',
  ownershipDistribution: '',
  haveCase: '',
  designatedCountry: '',
  brandType: '',
  classQuantity: '',
  quantity: '',
  officialFee: '',
  agencyFee: '',
  hirdPartyPayment: '',
  signedAmount: '',
  invoiceValue: '',
  fundsReceived: '',
  paidupDate: '',
  planNumber: '',
  caseStatus: '',
  caseLink: '',
  remark: '',
  caseNameid: '',
  businessTypeid: '',
  undertakingDepartmentid: '',
  ownershipDistributionid: '',
  costTypeid: '',
  correlationTypeid: '',
  isRegister: '',
  isInvalid: '',
  isExistingcase: '',
  isPapernotice: '',
  customerDocumentNumber: '',
  copyrightType: '',
  caseFlow: '',
  countryOfOrigin: '',
  agency: '',
  proposalForm: '',
  isMaterials: '',
  isFund: '',
  initialPeriod: '',
  referenceNumber: '',
  contractNumber: '',
  budget: '',
  author: '',
  homeLocation: '',
  softwareAbbreviation: '',
  versionNumber: '',
  softwareWorkDescription: '',
  developmentCompletionDate: '',
  publishedStatus: '',
  hardwareEnvironment: '',
  softwareEnvironment: '',
  programmingLanguage: '',
  sourceQuantity: '',
  functionAndArt: '',
  handlingInformation: '',
  principalDates: '',
  customerTerm: '',
  internalWearLife: '',
  isStateCompensation: '',
  click: '',
  partOwner: '',
  todonote: '',
  manageDate: '',
  countType: '',
  numberOfPoints: '',
  addtotalstatepoint: '',
  royaltyDate: '',
  workPoints: '',
  creator: '',
  chargeType: '',
  currency: '',
  sum: '',
  advancePaymentDate: '',
  paymentRequestNumber: '',
  requestedDate: '',
  accountsDate: '',
  invoiceNumber: '',
  chargeName: '',
  chargeDepict: '',
  chargeDepictfine: '',
  extendedAmount: '',
  discountRate: '',
  count: '',
  parities: '',
  collectingCompanyAccount: '',
  collectionStatus: '',
  accountDetails: '',
  slt: '',
  externalBillingNumber: '',
  externalBillingDate: '',
  beddingCondition: '',
  handOver: '',
  expenseNote: '',
  reductionType: '',
  actualCurrency: '',
  officialDeadline: '',
  ourRef: '',
  relevantCaseName: '',
  correlationType: '',
  userId: '',
  userName: '',
  id: '',
  updateUserId: '',
  updateUserName: ''
})

const formRules = {
  caseName: [
    {
      required: true,
      message: '请输入案件名称',
      trigger: ['blur']
    }
  ],
  businessType: [
    {
      required: true,
      message: '请选择业务类型',
      trigger: ['blur']
    }
  ],
  undertakingDepartment: [
    {
      required: true,
      message: '请选择承办部门',
      trigger: ['blur']
    }
  ],
  designatedCountry: [
    {
      required: true,
      message: '请输入申请国家（地区）',
      trigger: ['blur']
    }
  ],
  handlingInformation: [
    {
      required: true,
      message: '请输入处理事项',
      trigger: ['blur']
    }
  ],
  id: [
    {
      required: true,
      message: '请输入主键ID',
      trigger: ['blur']
    }
  ]
}

const handleSubmit = async () => {
  await formRef.value?.validate()
  const data: any = {...formData}
  mode.value == 'edit' ? await caseEdit(data) : await caseAdd(data)
  popupRef.value?.close()
  feedback.msgSuccess('操作成功')
  emit('success')
}

const open = (type = 'add') => {
  mode.value = type
  popupRef.value?.open()
}

const setFormData = async (data: Record<string, any>) => {
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      //@ts-ignore
      formData[key] = data[key]
    }
  }
}

const getDetail = async (row: Record<string, any>) => {
  const data = await caseDetail({
    id: row.id
  })
  setFormData(data)
}

const handleClose = () => {
  emit('close')
}

defineExpose({
  open,
  setFormData,
  getDetail
})
</script>
